<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div>
          <el-button icon="el-icon-arrow-left" type="info" size="mini" @click="$router.go(-1)">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 添加菜单表单 -->
    <el-row>
      <el-col :span="24">
        <el-form :rules="rules" ref="MenuForm" :model="MenuForm" label-width="100px" label-position="top" :inline="true"
          size="medium">
          <input type="hidden" v-model="MenuForm.pk_Menu" />
          <el-form-item label="名称" prop="Name_CHS">
            <el-input placeholder="菜单名称" v-model="MenuForm.Name_CHS"></el-input>
          </el-form-item>
          <el-form-item>
            <template slot="label">
              <a style="text-decoration:none;color:#606266" href="https://element.eleme.cn/#/zh-CN/component/icon">
                图标<span class="el-icon-info from_icon"></span></a>
            </template>
            <el-input placeholder="点击图标查看样式表" :prefix-icon="MenuForm.Icon" v-model="MenuForm.Icon"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="Url">
            <el-input placeholder="" v-model="MenuForm.Url"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="SortID">
            <el-input placeholder="排序号" v-model.number="MenuForm.SortID"></el-input>
          </el-form-item>
          <el-form-item label="显示">
            <el-checkbox label="" v-model="MenuForm.Visible" :checked="MenuForm.Visible"></el-checkbox>
          </el-form-item>
          <el-form-item label="类型" prop="TypeID">
            <el-select v-model="MenuForm.TypeID" placeholder="选择类型">
              <el-option v-for="(item,index) in TypeList" :key="index" :value="item.ID" :label="item.TypeName_CHS">
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-check" @click="submit('MenuForm')">提交</el-button>
            <el-button type="normal" size="small" icon="el-icon-close" @click="$router.go(-1)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
}

.el-form-item {
  width: 49%;
}
.from_icon {
  margin-left: 3px;
  font-size: 15px;
  &:hover {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
<script>
export default {
  data () {
    return {
      MenuForm: {
        ParentID: 0
      },
      TypeList: [],
      Type: 'Add',
      //表单验证
      rules: {
        Name_CHS: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        Url: [
          { required: true, message: '路径不能为空', trigger: 'blur' }
        ],
        SortID: [
          { required: true, message: '需指定排序号', trigger: 'blur' },
          { type: 'integer', message: '只能输入整数', trigger: 'blur' }
        ],
        TypeID: [
          { required: true, message: '必须选择类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //提交表单,添加菜单
    submit (MenuForm) {
      //表单验证
      this.$refs[MenuForm].validate((valid) => {
        if (!valid) {
          return false;
        }
        //执行请求
        this.$axios({
          url: '/HrApi/MenuMange/UpdateMenu',
          method: "POST",
          data: this.$Qs.stringify({
            MenuInfo: JSON.stringify(this.MenuForm),
            Type: this.Type
          })
        }).then(res => {
          if (!res.data.code) {
            if (this.Type === "Add") {
              //添加成功，重置表单
              this.$refs[MenuForm].resetFields();
            }
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    GetDt () {
      this.$axios({
        url: '/HrApi/MenuMange/GetMenuInfo',
        method: 'GET',
        params: {
          MenuID: this.$route.query["pk_Menu"]
        }
      }).then(res => {
        if (!res.data.code) {
          this.MenuForm = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  mounted () {
    //拉取类型
    this.$axios({
      url: '/HrApi/MenuMange/GetTypeList',
      method: 'GET'
    }).then(res => {
      this.TypeList = res.data.data
    })
    if (Object.keys(this.$route.query).length) {
      if (this.$route.query["Type"] === "Edit") {
        //编辑
        this.Type = "Edit";
        this.GetDt();
      } else if (this.$route.query["Type"] === "Add") {
        this.Type = "Add";
        if (Object.keys(this.$route.query).length > 1) {
          this.MenuForm.ParentID = parseInt(this.$route.query["pk_Menu"])
        }
      }
    }
  }
}
</script>